<template>
  <div class="package-header">
    <ul>
      <!--<li is="complex-search"/>-->
      <li
        v-for="(item,index) in list"
        :key="index"
        :class="{active:kind === item.kind}"
        :kind="item.kind"
        @click="handleBtnClick(item)"
      >{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import ComplexSearch from './complexsearch'
export default {
  components: {
    ComplexSearch
  },
  data() {
    return {
      kind: 'all',
      list: [
        {
          kind: '',
          title: '全部'
        },
        {
          kind: 'live',
          title: '直播'
        },
        {
          kind: 'record',
          title: '录播'
        }
      ]
    }
  },
  methods: {
    handleBtnClick(item) {
      this.kind = item.kind
      this.$emit('getTab', this.kind)
    }
  }
}
</script>

<style lang="scss" scoped>
.package-header {
  height: 56px;
  line-height: 56px;
  background-color: #f8f8f8;
  min-width:1003px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      float: left;
      margin-left: 34px;
      cursor: pointer;
      color: #555555;
    }
    li.active {
      color: #409eff;
    }
  }
}
</style>
